<template>
    <div>
        <!-- <Tree :data="data1"></Tree> -->

        <Button type="primary" style="margin-top:-38px" @click="modal=true" >添加数据</Button>
        <Button type="primary" style="margin-top:-38px" @click="removes">删除多个</Button>
        <Input suffix="ios-search" placeholder="输入搜索关键字" style="width: auto;margin-top: -38px;" v-model="searchBox"/>
        <Button type="primary" @click="onSearch" style="margin-top: -38px;">搜索</Button>
        <Table border :columns="column" :data="list" @on-selection-change="onSelect">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
        </Table>



        <Modal
            v-model    = "modal"
            title      = "添加数据"
            @on-ok     = "ok"
            @on-cancel = "cancel"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="产品名称" prop="name">
                    <Input type="text" v-model="formValidate.title"></Input>
                </FormItem>
                <FormItem label="产品价格" prop="passwdCheck">
                    <Input type="text" v-model="formValidate.content"></Input>
                </FormItem>
                <FormItem label="产品介绍" prop="age">
                    <quill-editor v-model="formValidate.address"></quill-editor>
                    <!-- <Input type="text" v-model="formValidate.address" number></Input> -->
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">清空</Button>
                </FormItem>
            </Form>

            <div slot="footer"></div>
        </Modal>
         <Modal
            v-model    = "commentmodal"
            title      = "评论"
            @on-ok     = "ok"
            @on-cancel = "cancel"
        >
            <Form ref="commentdata" :model="commentdata" :rules="ruleValidate" :label-width="80">
                <FormItem label="评论对象" >
                    <Input type="text" v-model="commentdata.commentObjectId"></Input>
                </FormItem>
                <FormItem label="title" >
                    <Input type="text" v-model="commentdata.titlecommentObject  "></Input>
                </FormItem>
                <FormItem label="content" >
                    <quill-editor v-model="commentdata.commentContent"></quill-editor>
                    <!-- <Input type="text" v-model="formValidate.address" number></Input> -->
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="commentsubmit()">提交</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">清空</Button>
                </FormItem>
            </Form>

            <div slot="footer"></div>
        </Modal>


         <Page :total="total" show-sizer @on-change="onChangPage" :page-size-opts="[5,10,20,50]" :page-size="rows" @on-page-size-change="onPageSizeChange"/>
    </div>

</template>
<script>
    export default {
        data () {
            return {

                searchBox   : '',
                total       : 0,
                rows        : 5,
                page        : 1,
                ids         : [],
                formValidate: {
                    content: '',
                    title  : '',
                    address: '',

                },
                commentdata: {
                   titlecommentObject: '',
                   commentObjectId   : '',
                   commentContent    : ''
                },
                data1      : [
                    {
                        title   : 'parent 1',
                        expand  : true,
                        children: [
                            {
                                title   : 'parent 1-1',
                                expand  : true,
                                children: [
                                    {
                                        title: 'leaf 1-1-1'
                                    },
                                    {
                                        title: 'leaf 1-1-2'
                                    }
                                ]
                            },
                            {
                                title   : 'parent 1-2',
                                expand  : true,
                                children: [
                                    {
                                        title: 'leaf 1-2-1'
                                    },
                                    {
                                        title: 'leaf 1-2-1'
                                    }
                                ]
                            }
                        ]
                    }
                ],
                ruleValidate:{

                },
               column: [
                    {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '产品名称',
                        key  : 'title'
                    },
                    {
                        title: '产品价格',
                        key  : 'content'
                    },
                    {
                        title : '产品介绍',
                        key   : 'address',
                        render: function(h,params){
                            return h('div',{
                                domProps:{
                                    innerHTML: params.row.address
                                }
                            })
                        }
                    },{
                        title: '评论',
                        key  : 'commentnum'
                    },
                    {
                    title : '操作',
                    key   : 'action',
                    width : 200,
                    align : 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row._id);
                                        }
                                    }
                                },
                                '修改'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            //this.edit(params.row._id);
                                            this.pinlun(params.row);
                                            this.commentmodal                   = true;
                                            this.commentdata.commentObjectId    = params.row._id;
                                            this.commentdata.titlecommentObject = params.row.title;
                                          
                                        }
                                    }
                                },
                                '评论'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id);

                                        }
                                    }
                                },
                                '删除'
                            )
                        ]);
                    }
                }
                ],
                list        : [],
                modal       : false,
                commentmodal: false,

            }
        },
        methods: {
            onChangPage(page){
                this.page = page,
                this.getList();
            },
            commentsubmit(){
                console.log(this.commentdata);
                 this.axios({
                    url   : 'http://localhost:3000/comment',
                    method: 'post',
                    data  : this.commentdata
                }).then(res => {
                    this.commentmodal = false;
                    this.getList();
                });
            },
            pinlun(id){
                console.log(id);
            },
            show (index) {

            },
            handleSubmit(name) {
                this.$refs[name].validate(valid => {
                    if (valid) {
                        if (this.formValidate._id) {
                            this.axios({
                                url: `http://localhost:3000/product/${
                                    this.formValidate._id
                                    }`,
                                method: 'put',
                                data  : this.formValidate
                            }).then(res => {
                                this.modal = false;
                                this.getList();
                                this.formValidate = {}
                            });
                        } else {
                            this.axios({
                                url   : `http://localhost:3000/product`,
                                method: 'post',
                                data  : this.formValidate
                            }).then(res => {
                                this.modal = false;
                                this.getList();
                                this.formValidate = {}

                            });

                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            remove (id) {
                console.log(this.formValidate)
                console.log(this.formValidate._id)
                this.$Modal.confirm({
                    title  : '确认对话框',
                    content: '<p>你想删除此条数据嘛？</p>',
                    onOk   : () => {
                        this.axios({
                            url   : `http://localhost:3000/product/${id}`,
                            method: 'delete'
                        }).then(res=>{
                            console.log(this.formValidate._id)
                            console.log(res.data)
                            this.getList()
                        })
                    }
                })
            },
            edit(id) {
                // 请示数据，打开对话框，显示表单的数据，进行提交
                this.axios({
                    url   : `http://localhost:3000/product/${id}`,
                    method: 'get'
                }).then(res => {
                    this.formValidate = res.data;
                    this.modal        = true;
                });
            },
            onSelect(selections) {
                var ids = [];
                for (let i = 0; i < selections.length; i++) {
                    ids.push(selections[i]._id);
                }
                this.ids = ids.toString();
                console.log(ids);
            },
            removes(){
                this.$Modal.confirm({
                    title  : '确认对话框',
                    content: '<p>你想删除选中的数据嘛？</p>',
                    onOk   : () => {

                    }
                })
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            removes() {
                console.log(this.ids)
            this.$Modal.confirm({
                title  : '确认操作',
                content: '<p>你确认删除该记录吗?</p>',
                onOk   : () => {
                    this.axios({
                        url   : `http://localhost:3000/product/removes`,
                        method: 'post',
                        data  : {
                            ids: this.ids
                        }
                    }).then(res => {
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('Clicked cancel');
                }
            });
        },
            getList(){
                this.axios({
                    url   : 'http://localhost:3000/product/list',
                    method: 'post',
                    data  : {
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res=>{
                    this.list  = res.data.rows;
                    this.total = res.data.total;
                    console.log(res.data);

                })
            },
            onChangPage(page){
                this.page = page,
                this.getList();
            },

            onPageSizeChange(rows) {
      this.rows = rows;
      if (this.searchBox) {
        this.onSearch();
      } else {
        this.getList();
      }
    },
    onSelect(selections) {
      var ids = [];
      for (let i = 0; i < selections.length; i++) {
        ids.push(selections[i]._id);
      }
      this.ids = ids.toString();
      console.log(ids);
    },
onSearch() {
      this.axios({
        url   : `http://localhost:3000/product/list`,
        method: 'post',
        data  : {
          title: this.searchBox,
          page : this.page,
          rows : this.rows
        }
      }).then(res => {
        //   console.log(res.data.rows)
        this.total = res.data.total;
        this.list  = res.data.rows;
      });
    }



        },
        mounted(){
            this.getList()
        }
    }
</script>

<style lang="scss">
    img{
        width : 100px;
        height: 100px;
    }
</style>

